<script>
/**
 * @desc 用户个人页面
 */

import { mapState, mapActions } from 'vuex'
import { navTo } from '@/utils'
import bg from '@/assets/images/user-background.jpg'
import defaultAvatar from '@/assets/icons/default-user.png'
import LinkItem from './link-item'
import OrderIco from '@/assets/icons/orders.svg'
import travelersIco from '@/assets/icons/travelers.svg'
import callIco from '@/assets/icons/call.svg'
import dongtaiIco from '@/assets/icons/dongtai.svg'
import InfoIco from '@/assets/icons/info.svg'
import ServiceLayer from '@/components/service-layer.vue'

export default {
  name: 'account-page',
  components: { LinkItem, ServiceLayer },
  data: () => ({
    callIco,
    bg,
    links: [
      { icon: InfoIco, to: 'account-info', text: '用户信息' },
      { icon: OrderIco, to: 'my-orders', text: '订单' },
      { icon: travelersIco, to: 'travelers-admin', text: '出行人' },
      { icon: dongtaiIco, to: 'my-post', text: '我的动态' }
    ],

    showService: false
  }),
  computed: {
    ...mapState('SignIn', ['isLogin', 'userInfo']),
    avatarUrl() {
      return this.userInfo.headImgUrl || defaultAvatar
    }
  },
  methods: {
    ...mapActions('SignIn', ['signIn']),
    handleGetUserInfo(e) {
      const { encryptedData, iv, userInfo } = e.target
      iv && this.signIn({ encryptedData, iv })
    },

    handleLinkClick(to) {
      if (this.isLogin) {
        navTo(to)
      } else {
        wx.showModal({ title: '提示', content: '请先授权登陆', showCancel: false })
      }
    },

    handleService(bool) {
      // 先弹出提示,当用户点击后再进入客服
      console.log(bool)
      this.showService = bool
    }
  },

  onShow() {
    this.showService = false
  }
}
</script>

<template>
  <div class="account-page">
    <div class="user-info-container">
      <img :src="bg" class="bg-image" mode="aspectFill" />
      <div class="content-box">
        <img :src="avatarUrl" class="avatar" />
        <p class="nick-name">{{userInfo.nickname}}</p>
        <button
          v-if="!isLogin"
          open-type="getUserInfo"
          class="login-btn"
          @getuserinfo="handleGetUserInfo"
        >登陆</button>
      </div>
    </div>

    <div class="link-group">
      <link-item
        v-for="(l,i) in links"
        :key="i"
        :icon="l.icon"
        :text="l.text"
        :handleClick="()=>handleLinkClick(l.to)"
      />
      
      <!-- 客服 -->
      <link-item
        :icon="callIco"
        text="联系客服"
        :handleClick="()=>handleService(true)"
      />

      <service-layer :show="showService" :handleClose="()=>handleService(false)" />
    </div>
  </div>
</template>

<style lang="scss">
@import './styles.scss';
</style>
